<template>
	<view class="main">
		<view class="q">
			快速问答
			<view class="q-item" v-for="item in questionList" :key="item.id" @click="send(item.question)">
				{{item.question}}
			</view>

		</view>

		<view v-for="(item, index) in msgList" :key="index">
			<!-- 自己发送的 -->
			<view class="message dpflex" v-if="item.state ==0">
				<view class="content ">
					<view class="timer">
						{{item.timer}}
					</view>
					<view class="msg">
							{{item.text}}
					</view>
				</view>
				<view class="avater">
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
			<!-- 别人发送的 -->
			<view class="message dpflex other" v-else>
				<view class="avater">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="content ">
					<view class="timer">
						{{item.timer}}
					</view>
					<view class="q">
						
						<view @click="send(item1)"   class="q-item" v-for="(item1,index1) in item.text" :key="index1">
							{{item1}}
						</view>
						
					</view>
				</view>
			</view>


		</view>






	</view>
</template>

<script>
	import {
		questionList,
		question
	} from '@/api/news.js'
	export default {
		data() {
			return {
				questionList: [],
				// 消息列表
				msgList: [
					// state:0 我自己发的   1: 别人发的
					// {
					// 	text: '休息休息',
					// 	state: 0,
					// 	timer: '2023-04-06 19:00:00'
					// },
				]
			};
		},
		methods: {
			async initQuestion() {
				let res = await questionList();
				console.log(res);
				this.questionList = res.data;
			},
			send(text){
				
				//自己发的消息 添加到 消息列表中
				let msg = {
					text:text,
					state:0,
					timer:new Date().toLocaleString()
				}
				this.msgList.push(msg)
				//发送问题给后端--后端返回回答的数据
				let data = {
					question:text
				}
				question(data).then(res=>{
					// 将别人的消息 放到消息列表中
					let text = JSON.parse(res.data[0].ans.replace(/'/g,'"'))
					let msg = {
						text:text,
						state:1,
						timer:new Date().toLocaleString()
					}
					this.msgList.push(msg)
				})
			}
		},
		created() {
			this.initQuestion()
		}
	}
</script>

<style lang="scss" scoped>
	// less   /deep/ .类名
	//scss   ::v-deep .类名     :deep(.类名){}
	.main {
		width: auto;
		padding: 20rpx;
		min-height: calc(100vh - 60rpx);
		background: #ccc;
	}

	.q {
		padding: 20rpx;
		background-color: #eee;

		.q-item {
			width: 100%;
	
			line-height: 60rpx;
			background-color: #fff;
			border-bottom: 1px solid #ccc;
		}
	}

	.message {

		width: 90%;
		margin: 20rpx auto;
		justify-content: flex-end;

		.avater {
			margin-left: 20rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}

		.timer {
			text-align: right;
		}

		.msg {
			background: #f60;
			color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

		}
	}

	.other {
		justify-content: flex-start;

		.content {
			width: 100%;
		}

		.timer {
			text-align: left;
		}

		.q {
			width: auto;
		}
	}
</style>